<template>
  <!-- 注册页面的整体盒子 -->
  <div class="register-container">
    <!-- 注册的盒子 -->
    <div class="register-box">
      <!-- 标题的盒子 -->
      <div class="title-box"></div>
      <!-- 注册的表单区域 -->
      <el-form
        :model="regForm"
        :rules="regFormRules"
        ref="regFormRef"
        style="padding-top: 30px; border-top: 1px solid #ccc"
      >
        <el-form-item prop="username">
          <el-input
            placeholder="请输入账号"
            prefix-icon="el-icon-user"
            v-model="regForm.username"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            show-password
            v-model="regForm.password"
          />
        </el-form-item>
        <el-form-item prop="repassword">
          <el-input
            placeholder="请确认密码"
            prefix-icon="el-icon-lock"
            show-password
            v-model="regForm.repassword"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleReg">注 册</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="text" @click="$router.push('/login')"
            >去登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// 目标：实现注册功能
// 1.  静态标签 + 样式
// 2. 收集表单数据（v-model）
// 3. 校验表单数据（4个绑定）
// (1). 给el-form绑定model和rules属性，需要声明rules规则
// (2). 给每个el-form-item绑定prop属性，表示当前需要校验的字段
// (3). 给el-input绑定v-model
// 4. 如果通过校验了，发请求
// (1) 新建文件  src/api/register.js
// (2) 定义注册的接口函数
// (3) 导入regAPI接口函数
// (4) 兜底校验通过之后，发请求
// (5) async + await的目的是简化then的写法，可以用async+await替代，
//  在接口函数前面使用await关键字，await关键字就近的函数必须用async修饰
// (6) 接收后台返回的结果，根据code判断，0 成功，1 失败
// 5. 跳转到登录页

import { regAPI } from '@/api/regsiter'
export default {
  name: 'Register',
  data () {
    // 自定义确认密码的校验函数
    const validateRepass = (rule, value, callback) => {
      if (value !== this.regForm.password) {
        callback(new Error('两次密码不一致'))
      } else {
        // 调用callback不传值表示校验通过
        callback()
      }
    }
    return {
      // 注册表单 - 字段最好与后台要求的字段保持一致
      regForm: {
        username: '',
        password: '',
        repassword: ''
      },
      // 注册表单的校验规则
      regFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            // pattern: 正则校验
            pattern: /^[a-z\d]{1,10}$/i,
            message: '用户名由字母数字组成，长度1-10',
            trigger: 'blur' // 校验的触发时机，可以是blur或change
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern: /^\S{6,15}$/i,
            message: '密码需由6-15位的非空字符组成',
            trigger: 'blur'
          }
        ],
        repassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          {
            pattern: /^\S{6,15}$/i,
            message: '确认密码需由6-15位的非空字符组成',
            trigger: 'blur'
          },
          // 确认密码需和原密码一致
          { validator: validateRepass, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleReg () {
      // 兜底校验
      this.$refs.regFormRef.validate(async (valid) => {
        // valid: true全部通过校验；否则不通过校验
        // 通过校验，发请求；否则直接return
        if (!valid) return
        // regAPI(this.regForm)
        //   .then((resp) => {
        //     console.log('126', resp)
        //   })
        //   .catch((e) => {})
        // async + await
        // 调用接口函数，获取后台数据
        const {
          data: { code, message }
        } = await regAPI(this.regForm)
        if (code === 0) {
          // 成功
          // 给个注册成功的提示
          this.$message.success(message)
          // 自动跳转到登录页
          this.$router.push('/login')
        } else {
          // 失败
          // 给个注册失败的提示
          this.$message.warning(message)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.register-container {
  // 在样式中引入src下的文件或目录，需要把@变成~@
  background: url('~@/assets/images/login_bg.jpg') center;
  background-size: cover;
  height: 100%;
  .register-box {
    width: 400px;
    height: 405px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0 30px;
    box-sizing: border-box;
    .title-box {
      height: 60px;
      background: url('~@/assets/images/login_title.png') center no-repeat;
    }
    .el-button {
      width: 100%;
    }
  }
  .el-form-item:last-child {
    text-align: left !important;
  }
}
</style>
